<template>
	<view class="" style="height: 100%;">
		<unicloud-db v-slot:default="{data, loading, error, options}" collection="swiper">
			<swiper style="height: 400rpx;" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="el in data" class="swiperItem" @click="selectSwper(el.id)">
					<image class="swiperImage" :src="el.url" mode="scaleToFill"></image>
				</swiper-item>

			</swiper>
		</unicloud-db>

		<unicloud-db ref="udb" v-slot:default="{data,index, loading,hasMore, error, options}" :page-size='10'
			collection="index" field="name,code,price,size,color,img">
			<view class="content">
				<view v-if="error">{{error.message}}</view>
				<view class="goodesList" v-else-if="data">
					<view class="goodesListItem" v-for="item in data" @click="to(item._id)">
						<view class="">
							<view class="" style="display: flex;justify-content: center;align-items: center;">
								<view class="goodesListItemImg">
									<image class="img" :src="item.img.url" mode=""></image>
								</view>
							</view>
							<view class="goodesListItemTitle">
								<view class="ellipsis">
									{{item.name}}
								</view>
							</view>
							<view class="goodesPice">
								<view class="goodesPiceLeft">
									￥{{item.price}}
								</view>
								<view class="goodesPiceRight">
									#{{item.code}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<uni-load-more :status="loading?'loading':(hasMore ? 'more' : 'noMore')"></uni-load-more>
				<view class="" style="height: 100rpx;">
				</view>
			</view>
		</unicloud-db>
		<uni-fab ref="fab" horizontal="right" vertical="bottom" :pop-menu="false" @fabClick="fabClick" />
	</view>
</template>

<script>
	const db = uniCloud.database()
	export default {
		data() {
			return {
				collectionList: "index",
				loadMore: {
					contentdown: '',
					contentrefresh: '',
					contentnomore: ''
				}
			}
		},
		onPullDownRefresh() {
			this.$refs.udb.loadData({
				clear: true
			}, () => {
				uni.stopPullDownRefresh()
			})
		},
		onReachBottom() {
			this.$refs.udb.loadMore()
		},
		methods: {
			selectSwper(id) {
				uni.navigateTo({
					url: '/pages/goodeDeils/goodeDeils?id=' + id
				})
			},
			handleItemClick(id) {
				uni.navigateTo({
					url: './detail?id=' + id
				})
			},
			to(id) {

				uni.navigateTo({
					url: '/pages/goodeDeils/goodeDeils?id=' + id
				})
			},
			async remove() {
				const db = uniCloud.database()
				const da = await db.collection('index').doc(id).remove()
				if (da.result.errCode == 0) {
					this.$refs.udb.loadData({
						clear: true
					})
				}
			},
			fabClick() {
				// 打开新增页面
				uni.navigateTo({
					url: './add',
					events: {
						// 监听新增数据成功后, 刷新当前页面数据
						refreshData: () => {
							this.$refs.udb.loadData({
								clear: true
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(to top, rgba(227, 227, 227, 0.2), rgba(255, 255, 255, 0.3)); //从下到上
		height: 100%;
	}

	.swiperItem {
		height: 100%;

		.swiperImage {
			width: 100%;
			height: 100%;
		}
	}

	.goodesList {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.goodesListItem {


		.goodesListItemImg {


			width: 100%;
			width: 300rpx;
			height: 300rpx;
			border-radius: 10rpx;

			margin-bottom: 15rpx;


		}

		box-shadow: 0rpx 0rpx 20rpx #d8d8d8;
		margin-bottom: 15rpx;
		width: 320rpx;
		overflow: hidden;
		background-color: #fff;
		padding: 15rpx;
		border-radius: 15rpx;
		box-shadow: 0rpx 0rpx 20rpx #f7f7f7;

		.goodesListItemTitle {
			font-weight: 600;
			color: #2b2b2b;
			font-size: 32rpx;
		}

		.goodesPice {
			display: flex;
			justify-content: space-between;
			margin-top: 10rpx;

			.goodesPiceLeft {
				font-weight: 700;
				color: #f40b0b;
			}

			.goodesPiceRight {
				font-size: 26rpx;
				color: #848484;
			}
		}
	}


	.content {
		padding: 15rpx 20rpx;

		height: 100%;

	}

	.img {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}

	.ellipsis {
		white-space: nowrap;
		/* 防止文本换行 */
		overflow: hidden;
		/* 隐藏溢出的文本 */
		text-overflow: ellipsis;
		/* 使用省略号表示溢出的文本 */
		width: 250rpx;
		/* 设置文本容器的宽度 */
	}
</style>